<template>
    <div>
        <panle :title="tipMessage" content=""></panle>
        <el-row :span="24" class="pt20">
            <el-form :model="form" ref="form" :rules="rules" label-width="150px" class="demo-ruleForm">
                <el-form-item label="允许补卡天数:" prop="allow_card_days" class="bold-label">
                    <el-col :span="2">
                        <el-input v-model.number="form.allow_card_days"></el-input>
                    </el-col>
                    <el-col :span="1">&nbsp;天</el-col>
                </el-form-item>
                <el-form-item label="封面:" prop="cover_url">
                    <div class="uploadcol">
                        <div class="uploadborder">
                            <img v-if="form.cover_url" :src="form.cover_url" />
                            <img v-else src="@/assets/img/uploadimg.jpg" />
                        </div>
                        <el-button type="primary" @click="uploadDialogVisible = true">请选择封面图片</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="任务内容:" prop="task_content">
                    <el-button type="primary" v-if="showSpeedSetVisible"  @click="speedSet"
                        style="width: 120px;margin-left: 15px;">
                        快速设置
                    </el-button>
                    <el-button type="primary" v-else @click="speedSet"
                        style="width: 180px;margin-left: 15px;">
                        已有内容,点击管理和编辑
                    </el-button>
                </el-form-item>
                <el-form-item label="任务名称:" prop="task_name">
                    <el-input v-model="form.task_name" placeholder="请输入任务名称"></el-input>
                </el-form-item>

                <!--                    <el-form-item label="开始时间:" required>-->
                <!--                        <el-col :span="8">-->
                <!--                            <el-form-item prop="start_time">-->
                <!--                                <el-date-picker type="datetime" placeholder="选择开始日期" v-model="form.start_time" style="width: 100%;"></el-date-picker>-->
                <!--                            </el-form-item>-->
                <!--                        </el-col>-->
                <!--                        <el-col class="line" :span="1">-</el-col>-->
                <!--                        <el-col :span="8">-->
                <!--                            <el-form-item prop="end_time">-->
                <!--                                <el-date-picker type="datetime" placeholder="选择结束日期" v-model="form.end_time" style="width: 100%;"></el-date-picker>-->
                <!--                            </el-form-item>-->
                <!--                        </el-col>-->
                <!--                        <el-col span="2">-->
                <!--                            <span style="font-size: 16px;margin-left: 5px;">(本次任务持续X天)</span>-->
                <!--                        </el-col>-->
                <!--                       -->
                <!--                    </el-form-item>-->
                <!--                    <el-form-item label="布置对象:" prop="student_type">-->
                <!--                        <el-radio-group v-model="form.student_type">-->
                <!--                            <el-radio :label="1">班级</el-radio>-->
                <!--                            <el-radio :label="2">学员</el-radio>-->
                <!--                        </el-radio-group>-->
                <!--                    </el-form-item>-->

                <el-form-item label="任务设置:" prop="delivery">
                    允许补卡 <el-switch v-model="form.is_allow_card"></el-switch>
                </el-form-item>
                <el-form-item label="任务描述:" prop="descr">
                    <el-input v-model="form.descr" placeholder="选填，可填入此次任务的规则要求（限300字以内）"></el-input>
                </el-form-item>
                <el-form-item label="备注信息:" prop="remarks">
                    <el-input v-model="form.remarks" placeholder="选填，仅老师及以上角色可见（限100字以内）"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm('form')">取消</el-button>

                  <pers-button type="primary" @click="submitForm('form')" perms="kanke:exercises:task:edit" label="保存模板"></pers-button>

<!--                    <pers-button type="primary" @click="submitForm('form')" perms="kanke:exercises:task:edit" label="保存模板" v-if="id"></pers-button>-->
<!--                    <el-button type="primary" @click="submitForm('form')" v-else>保存模板</el-button>-->
                </el-form-item>
            </el-form>
        </el-row>


        <!-- 显示通用素材上传 调用基础素材 -->
        <upload-file :visible.sync="uploadDialogVisible" :type="image"
            @childFileEvent="handleChildFileEvent"></upload-file>

        <!-- 显示添加任务列表 -->
        <div v-if="showAddTaskListDialogVisible">
            <ShowAddTaskList :visible.sync="showAddTaskListDialogVisible"></ShowAddTaskList>
        </div>
        <!-- 显示添加弹框 -->
        <show-content-pop :visible.sync="centerDialogVisible"></show-content-pop>
    </div>
</template>

<script>
import { detail, edit } from "@/api/kanke/exercises/tasktemplate";
import ShowAddTaskList from "./components/ShowAddTaskList";
import ShowContentPop from "./components/ShowContentPop";
import UploadFile from "@/views/kanke/components/UploadFile";
import PersButton from '../../../../components/PersButton.vue';
export default {
    name: 'createTaskTemplate',
    components: {
        UploadFile,
        ShowAddTaskList,
        ShowContentPop,
        PersButton
    },
    data() {
        return {
            loading: false,
            image: 'image',
            centerDialogVisible: false,  //显示添加听力、阅读等
            uploadDialogVisible: false,  //选择图片
            showAddTaskListDialogVisible: false,
            needSaveContent: [999],  //所有需要保存的内容
            showSpeedSetVisible: true,
            form: {
                cover_url: '',
                task_name: '',
                allow_card_days: 180,
                start_time: '',
                end_time: '',
                student_type: '',
                is_allow_card: true,
                descr: '',
                remarks: '',
                courseware_data: {}
            },
            tipMessage: '创建打卡任务',  //添加或编辑
            rules: {
                task_name: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' },
                ],
                allow_card_days: [
                    { required: true, message: '允许补卡天数不能为空' },
                    { type: 'number', message: '允许补卡天数必须为数字值' }
                ],
                descr: [
                    { max: 100, message: '长度限制100字以内', trigger: 'blur' }
                ],
                remarks: [
                    { max: 300, message: '长度限制300字以内', trigger: 'blur' }
                ],
            }
        }
    },
    computed: {
        id() {
            return this.$route.query?.id || 0
        }
    },
    watch: {
        $route(to, from) {
            //window.location.reload();
            this.init();
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            if (this.id >0) {

                this.loading = true;
                this.tipMessage = '编辑打卡任务';
                const res = await detail({ id: this.id })
                this.loading = false;

                if (res.code == 200) {

                    this.form.task_name = res.data.task_name;
                    this.form.cover_url = res.data.cover_url;
                    this.form.allow_card_days = res.data.allow_card_days
                    this.form.is_allow_card = res.data.is_allow_card ? true : false;
                    this.form.student_type = res.data.student_type;
                    this.form.descr = res.data.descr;
                    this.form.remarks = res.data.remarks;

                    //课件数据
                    this.$store.commit('RESET_ALL_STATES');
                    if (res.data.courseware_json) {
                        this.$store.commit('SET_TASK_DAY', res.data.courseware_json);
                        this.showSpeedSetVisible = false;
                    }
                }

            } else {

                this.tipMessage = '创建打卡任务';
                this.$store.commit('RESET_ALL_STATES');
                this.form = {
                        cover_url: '',
                        task_name: '',
                        allow_card_days: 180,
                        start_time: '',
                        end_time: '',
                        student_type: '',
                        is_allow_card: true,
                        descr: '',
                        remarks: '',
                        courseware_data: {}
                }
                this.showSpeedSetVisible = true;
            }
        },
        speedSet() {
            this.showAddTaskListDialogVisible = true;
        },
        handleChildFileEvent(data) {
            console.log('reveiveFileInfo', data);
            if (data.length > 1) {
                this.$message.error('不能多选')
            }
            if (data.length == 1) {
                this.form.cover_url = data[0]
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    //获取课件信息
                    let courseware_data = this.$store.state.assignTask.taskDays;
                    const params = {
                        ...this.form,
                        id: this.id,
                        courseware_data
                    }
                    edit(params).then((res) => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.$router.go(-1)
                            //this.init(); 
                        } else {
                            this.msgError(res.msg);
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            // this.$refs[formName].resetFields();
            this.$router.go(-1)
        }
    }
}


</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
    font-weight: bold;
    font-size: 16px;
}

.uploadcol {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .uploadborder {
        img {
            width: 80px;
            height: 80px;
            margin-right: 40px;
        }

    }
}
</style>